<template>
  <a-modal
    :open="visible"
    title="题目详情"
    width="900px"
    :footer="null"
    class="topic-detail-modal"
    @cancel="handleClose"
  >
    <div class="space-y-6">
      <!-- 基础信息区域 -->
      <div class="bg-gray-50 p-4 rounded-lg">
        <h2 class="text-lg font-bold mb-4">{{ details?.title }}</h2>
        <div class="flex items-center gap-4 text-gray-600">
          <span>难度：
            <span :class="{
              'text-green-600': details?.difficulty === 0,
              'text-yellow-600': details?.difficulty === 1,
              'text-red-600': details?.difficulty === 2
            }">
              {{ ['简单', '中等', '困难'][details?.difficulty] }}
            </span>
          </span>
          <span>通过率：{{ details?.passingRate }}%</span>
          <span>提交次数：{{ details?.submitNum }}</span>
          <span>通过次数：{{ details?.passNum }}</span>
        </div>
      </div>

      <!-- 题目描述 -->
      <div>
        <h3 class="text-lg font-semibold mb-3">题目描述</h3>
        <div class="bg-gray-50 p-4 rounded-lg whitespace-pre-wrap">{{ details?.content }}</div>
      </div>

      <!-- 相关表格信息 -->
      <div>
        <h3 class="text-lg font-semibold mb-3">数据表信息</h3>
        <div class="space-y-4">
          <div v-for="table in details?.topicTableList" :key="table.id" class="bg-gray-50 p-4 rounded-lg">
            <div class="flex justify-between items-center mb-2">
              <span class="font-medium">{{ table.name }}</span>
              <span class="text-gray-600">{{ table.description }}</span>
            </div>
            <table class="min-w-full">
              <thead class="bg-gray-100">
                <tr>
                  <th class="px-4 py-2 text-left">字段名</th>
                  <th class="px-4 py-2 text-left">类型</th>
                  <th class="px-4 py-2 text-left">描述</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="column in table.columnList" :key="column.name">
                  <td class="px-4 py-2">{{ column.name }}</td>
                  <td class="px-4 py-2">{{ column.type }}</td>
                  <td class="px-4 py-2">{{ column.description }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>

      <!-- 测试用例 -->
      <div v-if="details?.testTopicList?.length">
        <h3 class="text-lg font-semibold mb-3">测试用例</h3>
        <div class="space-y-4">
          <div v-for="(test, index) in details.testTopicList" :key="index" class="bg-gray-50 p-4 rounded-lg">
            <div class="mb-4">
              <h4 class="font-medium mb-2">输入数据：</h4>
              <div v-for="input in test.inputList" :key="input.tableName" class="mb-2">
                <div class="font-medium text-gray-600 mb-1">{{ input.tableName }}表：</div>
                <div class="overflow-x-auto">
                  <pre class="bg-gray-100 p-2 rounded">{{ JSON.stringify(input.data, null, 2) }}</pre>
                </div>
              </div>
            </div>
            <div>
              <h4 class="font-medium mb-2">期望输出：</h4>
              <div class="overflow-x-auto">
                <pre class="bg-gray-100 p-2 rounded">{{ JSON.stringify(test.outputList, null, 2) }}</pre>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script setup>
import { Modal as AModal } from 'ant-design-vue';

defineProps({
  visible: {
    type: Boolean,
    required: true
  },
  details: {
    type: Object,
    default: () => null
  }
});

const emit = defineEmits(['update:visible']);

const handleClose = () => {
  emit('update:visible', false);
};
</script>

<style scoped>
.topic-detail-modal :deep(.ant-modal-body) {
  max-height: 80vh;
  overflow-y: auto;
}

pre {
  white-space: pre-wrap;
  word-wrap: break-word;
}
</style>
